<template>
	<!-- 添加弹框 -->
	<el-dialog title="" width="70%" :append-to-body="true" :visible.sync="dialogTableVisible" class="wrap" @close="cancel">

		<i class="el-icon-close close" @click="cancel" style="color: white;z-index: 99;"></i>
		<div class="bt">标签选择</div>
		<div class="top" style="width: 100%;height: 50px;">
		<el-button type="primary" class="submit" @click="cancel">返回</el-button>
		<el-button type="primary" class="submit" @click="submit">保存</el-button>
		</div>
		<div class="quan">
			<div class="bqleft">
				<div class="tjlx">
					标签分组
				</div>
				<div class="xglx" v-if='xiugai'>
					<el-input class="input" placeholder="" v-model="fz"></el-input>
					<el-button type="success" size="small" class="btn" @click="ad1">保存</el-button>
				</div>
				<ul>
					<li v-for="v in dataList" :class="v.class" @click="bqlist2(v.fzmc)">
						{{v.fzmc}}
						<!--							<i class="el-icon-close del1" @click = "delbqfl(v.id)"></i>-->
					</li>
				</ul>
			</div>
			<div class="bqright">
				<!--<div class="tjlx"  @click = "tianjia2" v-if="tj2">
						+点击添加类型
					</div>-->
				<div class="xglx" v-if='xiugai2'>
					<el-input class="input" placeholder="" v-model="bq"></el-input>
					<el-button type="success" size="small" class="btn" @click="ad2">保存</el-button>
				</div>
				<div class="bqlist">
					<span>标签</span><br/>
					<hr>
					<el-checkbox-group v-model="vbjid" @change="checkbq">
						<!--<el-tag type="success" class="list1"   @click = "delbq(v.id)"-->
						<!--v-for="v in bqList">-->
						<el-checkbox v-for="(v,index)  in bqList" :label="v.bqmc">{{v.bqmc}}</el-checkbox>
						<!--</el-tag>-->
					</el-checkbox-group>
				</div>
				<div class="right">
					<div class="choose">
						<ul class="header">
							<li class="first">
								<div>
									<span>已选择:</span>
									<span class="number">{{multipleList.length}}</span>
								</div>
								<span class="del el-icon-delete" @click="delbq2()">
                                <i></i>
                            </span>
							</li>
							<li v-for="(v,index) in multipleList">
								<span class="name ellipsis">{{v}}</span>
								<span class="del el-icon-delete" @click="delbq2(v)">
                                <i></i>
                            </span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<!-- <el-button type="info" class="submit" @click="submit">保存</el-button> -->
	</el-dialog>
</template>
<script type="text/javascript">
	import qs from 'qs'

	export default {
		 props: ['params'],
		data() {
			return {
				bq: '',
				fz: '',
				vbjid: [],
				vjsmc: '',
				vnote: '',
				tj: true,
				xiugai: false,
				dataList: [],
				bqList: [],
				multipleList: [],
				tj2: true,
				xiugai2: false,
				visenable: '',
				dialogTableVisible: true,
				sx: 'Y',
			}
		},
		created() {
			// this.vjsid =this.params.row.id;
//			alert(this.params)
			this.$store.dispatch('changeTitle', '标签页'); //修改title
			this.$store.dispatch('changeRouterIndex', '/admin/xxjbsz'); //修改路由
			this.bqlist()
		},
		methods: {
			tianjia() {
				this.tj = false;
				this.xiugai = true;
			},
			tianjia2() {
				this.tj2 = false;
				this.xiugai2 = true;
			},
			checkbq() {
//				console.log('1111111111111', this.vbjid)
				var isexists = false;
				for(let i in this.vbjid) {
					isexists = false;
					for(let b in this.multipleList) {
						if(this.multipleList[b] == this.vbjid[i]) {
							isexists = true;
							break;
						}
					}
					if(!isexists) {
						this.multipleList.push(this.vbjid[i]);
					}
				}
			},
			delbq2(bqobj) {
				if(bqobj) {
					var dd = [];
					for(let b in this.multipleList) {
						//					 	alert(this.multipleList [b])
						//					 	alert(bqobj+"-----")
						if(this.multipleList[b] == bqobj) {
							continue;
						} else {
							dd.push(this.multipleList[b])
						}
					}

					this.multipleList = dd;
				} else {
					this.multipleList = [];
				}

				var isexists = false;
				var dd = [];
				for(let b in this.vbjid) {
					isexists = false;
					for(let i in this.multipleList) {
						if(this.multipleList[i] == this.vbjid[b]) {
							isexists = true;
							break;
						}
					}
					if(isexists) {
						dd.push(this.vbjid[b])
					}
				}
				this.vbjid = dd;
			},
			bqlist2(fzmc) {
             var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                 fzmc: fzmc,
						xxid: logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bq/list2',  params2 )
                 .then(res => {
                 	this.fzmc1 = fzmc;
					let data = res.data.data;
					let list = data.list;
					this.bqList = list;
					this.searchLoading = false;
					this.vbjid = this.multipleList;
                 }).catch(res => {
					console.log(res)
					this.searchLoading = false;
				})
			},
			bqlist() {
				var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                xxid: logininfo.xxid,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'bqfl/list2',  params2 )
                 .then(res => {
                 console.log(res)
					console.log(111)
					let data = res.data.data;
					let list = data.list;
					this.dataList = list;
					this.searchLoading = false;
                 }).catch(res => {
					console.log(res)
					this.searchLoading = false;
				})
			},
			delbq(id) {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				this.axios.get(this.$store.state.api + 'bq/deletepl', {
					params: {
						ids: id + '',
						xxid: logininfo.xxid + '',
					}
				}).then(res => {
					this.bqlist()
					this.bqlist2(this.fzmc1)
				}).catch(res => {

				})
			},
			ad1() {
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				this.axios.get(this.$store.state.api + 'bqfl/insert', {
					params: {
						fzmc: this.fz,
						xxid: logininfo.xxid,
					}
				}).then(res => {
					this.tj = true;
					this.xiugai = false;
					this.bqlist()
					this.fz = ""
				}).catch(res => {
					console.log(res)
					this.searchLoading = false;
				})
			},
			ad2() {
				// alert(this.fzmc1)
				var logininfo = JSON.parse(localStorage.logininfo);
				this.searchLoading = true;
				this.axios.get(this.$store.state.api + 'bq/insert', {
					params: {
						fzmc: this.fzmc1,
						bqmc: this.bq,
						xxid: logininfo.xxid,
					}
				}).then(res => {
					console.log(res)
					this.tj2 = true;
					this.xiugai2 = false;
					this.bqlist2(this.fzmc1)
					this.bq = ""
				}).catch(res => {
					console.log(res)
					this.searchLoading = false;
				})
			},
			cancel() {
				this.$emit('close', { type: 'bq', cancel: true })
			},
			submit(){
				this.$emit('close', { type: 'bq', cancel: false,clist:this.multipleList ,name:this.params})
			},
		}
	}
</script>
<style lang="less" scoped>
	.bqleft {
		padding-bottom: 50PX;
		text-align: center;
		width: 20%;
		float: left;
		border: 1px solid #CCCCCC;
		.tjlx {
			width: 150px;
			border: 1px solid #CCCCCC;
			height: 30px;
			/*line-height: 35px;*/
			font-weight: 700;
			/*border-radius: 5px;*/
			color: #000;
			font-size: 15px;
			text-align: center;
			/*margin: 10px auto;*/
		}
		.bqfz {
			width: 100%;
			height: 50px;
			float: left;
			background: #CCCCCC;
			text-align: center;
			line-height: 50px;
			font-size: 18px;
		}
		.input {
			width: 50%;
		}
		ul {
			width: 100%;
			border-radius: 15px;
			/*padding-top: 50px;*/
			padding-bottom: 10px;
			li {
				width: 100%;
				font-size: 16px;
				height: 50px;
				/*border-radius: 5px;*/
				margin: 0 auto;
				line-height: 50px;
				border-bottom: 1px solid #CCCCCC;
				/*margin-top: 10px;*/
				position: relative;
				.del1 {
					font-size: 20px;
					position: absolute;
					top: 5px;
					right: 5px;
				}
			}
			// li:hover{
			// 	background-color: red;
			// 	color: #fff;
			// }
		}
	}

	.red {
		background: #fff;
	}

	.back {
		color: #fff;
		background: red;
	}

	.wrap {
		.quan {
			overflow: hidden;
			.bqleft {
				padding-bottom: 50PX;
				text-align: center;
				width: 25%;
				float: left;
				.tjlx {
					width: 100%;
					height: 45px;
					line-height: 45px;
					background: #CCCCCC;
					font-size: 15px;
					text-align: center;
				}
				.xglx {
					margin: 10px auto;
					height: 40px;
					line-height: 40px;
				}
				.input {
					width: 100px;
				}
				ul {
					width: 100%;
					border-radius: 15px;
					/*// margin-top: 20px;*/
					/*border: 3px solid #ccc;*/
					/*padding-top: 10px;*/
					padding-bottom: 10px;
					li {
						width: 100%;
						height: 50px;
						/*border-radius: 5px;*/
						margin: 0 auto;
						line-height: 50px;
						/*border: 1px solid #454545;*/
						position: relative;
						// background: #ccc;
						.del1 {
							font-size: 20px;
							position: absolute;
							top: 5px;
							right: 5px;
						}
					}
					li:hover {
						background-color: red;
						color: #fff;
					}
				}
			}
			.bqright {
				width: 70%;
				float: right;
				top: 0;
				text-align: center;
				// margin-left: 30%;
				// border: 1px solid red;
				padding-bottom: 50PX;
				.tjlx {
					width: 150px;
					border: 3px solid #ccc;
					height: 40px;
					line-height: 35px;
					font-weight: 700;
					border-radius: 5px;
					color: #ccc;
					// font-size: 15px;
					text-align: center;
					margin: 10px auto;
				}
				.input {
					width: 100px;
				}
				.bqlist {
					width: 65%;
					border-radius: 5px;
					/*// margin-top: 20px;*/
					border: 1px solid #ccc;
					padding-top: 10px;
					padding-bottom: 10px;
					margin-top: 20px;
					float: left;
					.list1 {
						width: 20%;
						height: 30px;
						line-height: 30px;
						margin-left: 5%;
						margin-top: 20px;
						margin-bottom: 20px;
					}
				}
				.right {
					width: 30%;
					/*max-height:500px;*/
					margin-left: 20px;
					float: right;
					overflow: auto;
					.choose {
						box-shadow: 0px 0px 10px #969696;
						border-radius: 10px;
					}
					.header {
						li {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 10px 20px;
							.del {
								cursor: pointer;
								position: relative;
								&:hover i {
									position: absolute;
									left: 50%;
									top: 50%;
									transform: translate(-50%, -50%);
									width: 25px;
									height: 25px;
									border-radius: 50%;
									background: rgba(0, 0, 0, 0.2);
								}
							}
						}
						.first {
							background: #EEF1F4;
							.number {
								min-width: 10px;
								padding: 2px 7px;
								font-weight: 700;
								border-radius: 10px;
								background: #FF4949;
								color: #fff;
							}
						}
					}
				}
			}
		}
		.input-block {
			margin-bottom: 20px;
			text-align: center;
		}
		.bt {
			position: absolute;
			width: 100%;
			height: 50px;
			margin: 0 auto;
			top: 0;
			left: 0;
			background: #50BFFF;
			margin-bottom: 20px;
			color: white;
			text-align: left;
			line-height: 50px;
			font-size: 17px;
			padding-left: 15px;
		}
		.sx {
			width: 300px;
			display: inline-block;
			text-align: left;
		}
		.select-block {
			display: block;
			width: 85%;
		}
		.form {
			text-align: center;
		}
		.input {
			display: inline-block;
			vertical-align: middle;
		}
		.submit {
			width: 120px;
		}
	}

	.wrap:after {
		content: '';
		display: block;
		clear: both;
	}
</style>
